@mixin flex() {
    display: flex;
    display: -webkit-flex;
    // display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    // display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    // display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    // display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    // display: -ms-flexbox;   /* 混合版本语法: IE 10 */   
}

@mixin vertical-centering() {
    // 垂直居中
    @include flex;
    align-content: center;
    align-items: center;
}

@mixin horizontally() {
    // 水平居中
    @include flex;
    justify-content: center;
    justify-items: center;
}

@mixin allCenter() {
    @include vertical-centering;
    @include horizontally;
}

@mixin lines-over-flow($lines) {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

@mixin btn1($borderColor, $backgroundColor, $color) {
    @include allCenter;
    border: 1px solid $borderColor;
    padding:5px 10px;
    border-radius: 4px;
    color: $color;
    background-color: $backgroundColor;
    opacity: 1;
}

@mixin btn2($borderColor, $backgroundColor, $color) {
    @include allCenter;
    border: 1px solid $borderColor;
    padding:5px 10px;
    border-radius: 20px;
    color: $color;
    background-color: $backgroundColor;
    opacity: 1;
}

//@mixin btn($borderColor, $backgroundColor, $color, $radius, $padding) {
//  @include allCenter;
//  border: 1px solid $borderColor;
//  padding: 0.3rem 0.7rem;
//  border-radius: $radius;
//  color: $color;
//  background-color: $backgroundColor;
//}
